<template>
  <div class="home">
    <el-tag class="nav">用户管理系统</el-tag>
    <alert v-if="alert" :messages="alert"/>
        <input type="search" placeholder="请输入想搜索的信息" class="form-control" v-model="searchData"/>
    <div class=" table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>姓名</th>
            <th>电话</th>
            <th>职业</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
        <tr v-for="table of filterBy(tableData, searchData)" :key="table.id">
          <td>{{table.name}}</td>
          <td>{{table.phone}}</td>
          <td>{{table.profession}}</td>
          <td><router-link tag="p" class="btn btn-info" :to="'/details/' + table.id">详情</router-link></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import Alert from '../common/Alert'
export default {
  name: 'home',
  components: {
    Alert
  },
  data () {
    return {
      tableData: [],
      alert: '',
      searchData: ''
    }
  },
  methods: {
    getUsersItem () {
      this.axios.get('/users')
        .then((res) => {
          console.log(res)
          const data = res.data
          this.tableData = data
        })
    },
    filterBy (tableData, searchData) { // 搜素过滤
      return tableData.filter((table) => {
        return (table.name.match(searchData) || table.phone.match(searchData))
      })
    }
  },
  updated () { // 添加数据的时候 实时更新
    this.$nextTick(() => {
      this.getUsersItem()
    })
  },
  created () {
    this.getUsersItem()
    if (this.$route.query.alert) {
      this.alert = this.$route.query.alert
      let that = this
      setTimeout(() => {
        that.alert = ''
      }, 2000)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .home
    margin-bottom 200px
    .nav
      margin-bottom 20px
      width 40%
      text-align center
  .table-responsive
    overflow-x hidden
    width: 100%
    .table
      text-align center
      font-size 30px
      box-sizing border-box
</style>
